<template>
	<view class="upload-wrap">
		<view class="preview-wrap">
			<!-- 预览 -->
			<block v-if="usePreview">
				<view class="image" v-for="(item, index) in tempImgArr" :key="item[imgCoverKey]" :style="{ borderRadius: radius + 'rpx' }">
					<u-image
						width="100%"
						height="152rpx"
						:border-radius="radius"
						@click="fnPreviewImage(index, tempImgArr)"
						:lazy-load="true"
						:src="item[imgCoverKey]"
						mode="aspectFill"
					></u-image>
					<u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, true)"></u-icon>
				</view>
				<view
					class="video"
					:class="{ 'no-mask': !item[videoCoverKey] }"
					:style="{ borderRadius: radius + 'rpx', '--radius': radius + 'px' }"
					v-for="(item, index) in tempVideoArr"
					:key="item[videoCoverKey]"
				>
					<block v-if="item[videoCoverKey]">
						<u-image
							width="152rpx"
							height="152rpx"
							:border-radius="radius"
							:lazy-load="false"
							:src="item[videoCoverKey]"
							mode="aspectFill"
							@click="fnPreviewVideo(item)"
						></u-image>
						<view class="video-play"><u-icon class="video-play-icon" name="play-right-fill" color="#fff" size="30" @click="fnPreviewVideo(item)"></u-icon></view>
						<u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, false)"></u-icon>
					</block>
					<block v-else>
						<view class="video-play-cover" :style="{ borderRadius: radius + 'rpx' }" >
							<u-image
								class="video-play-cover-image"
								width="100%"
								height="100%"
								:border-radius="radius"
								:lazy-load="false"
								:src="videoDefaultCover"
								mode="scaleToFill"
								@click="fnPreviewVideo(item)"
							></u-image>
						</view>
						<!-- <text class="video-play"><u-icon class="video-play-icon" name="play-right-fill" color="#fff" size="30" @click="fnPreviewVideo(item)"></u-icon></text> -->
						<u-icon v-if="!disabled" class="delete-icon" name="close" color="#fff" size="24" @click="deleteImageOrVideo(index, false)"></u-icon>
					</block>
				</view>
			</block>
			<!-- 选择 -->
			<block>
				<view class="select-item" :style="{ borderRadius: radius + 'rpx' }" v-if="useImage && imgArr.length < imgLimit" @click="chooseImage">
					<u-icon class="icon" name="camera" color="#999" size="40"></u-icon>
					<view class="text">{{ selectImageText }}</view>
				</view>
				<view class="select-item" :style="{ borderRadius: radius + 'rpx' }" v-if="useVideo && videoArr.length < videoLimit" @click="chooseVideo">
					<text class="icon e-icon-video e-icon e-icon-shipin"></text>
					<view class="text">{{ selectVideoText }}</view>
				</view>
			</block>
		</view>
		<!-- 超出的图片大小展示 -->
		<view class="over-size-wrapper" v-if="showOverLimitTip && !useOverLimitTipModal && overSizeImgArr.length != 0">
			<view class="over-size-wrapper-title">
				<text class="over-size-wrapper-title-tip">以下图片超出限制上传失败，限制为{{ fileUnitConversion(imgSizeLimit, 'KB', 'M') }}M</text>
				<text class="over-size-wrapper-title-clear" @click="fnClearOverSizeArr('image')" :style="{ color: color }">
					<u-icon class="over-size-wrapper-title-clear-icon" name="close" size="20" :color="color"></u-icon>
					关闭提示
				</text>
			</view>
			<view class="over-size-wrapper-list">
				<block v-for="(img, index) in overSizeImgArr" :key="index">
					<view class="over-size-wrapper-list-item">
						<image class="over-size-wrapper-list-item-image" :src="img.url" mode="aspectFill"></image>
						<view class="over-size-wrapper-list-item-name">{{ img.fileName }}</view>
						<view class="over-size-wrapper-list-item-size">{{ img.size }}</view>
					</view>
				</block>
			</view>
		</view>
		<u-popup v-model="isShowOverLimitModal" mode="center" :z-index="9999" border-radius="20">
			<view class="modal-content padding-15">
				<view class="over-size-wrapper in-modal" v-if="showOverLimitTip && overSizeImgArr.length != 0">
					<view class="over-size-wrapper-title">
						<text class="over-size-wrapper-title-tip">以下图片超出限制上传失败，限制为{{ fileUnitConversion(imgSizeLimit, 'KB', 'M') }}M</text>
						<text class="over-size-wrapper-title-clear" @click="fnClearOverSizeArr('image')" :style="{ color: color }">
							<u-icon class="over-size-wrapper-title-clear-icon" name="close" size="20" :color="color"></u-icon>
							关闭提示
						</text>
					</view>
					<view class="over-size-wrapper-list">
						<block v-for="(img, index) in overSizeImgArr" :key="index">
							<view class="over-size-wrapper-list-item">
								<image class="over-size-wrapper-list-item-image" :src="img.url" mode="aspectFill"></image>
								<view class="over-size-wrapper-list-item-name">{{ img.fileName }}</view>
								<view class="over-size-wrapper-list-item-size">{{ img.size }}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal
			:show-cancel-button="true"
			:confirm-color="color"
			v-model="uploadFileDeleteModal.show"
			@confirm="uploadFileDeleteConfirm"
			@cancel="uploadFileDeleteModal.show = false"
			:content="uploadFileDeleteModal.tip"
		></u-modal>
		<u-modal z-index="10076" v-model="uploadFileTip.show" title="提示" :confirm-text="cancelText" :confirm-color="cancelColor" @confirm="uploadFileTipDestroy()">
			<view class="slot-content">
				<view class="progress-wrapper">
					<u-line-progress :active-color="color" :striped="true" :striped-active="true" :percent="uploadFileTip.progress"></u-line-progress>
					<view class="progress-tip">文件上传中，请稍等（{{ uploadFileTip.totalBytesSent }}/{{ uploadFileTip.totalBytesExpectedToSend }}M）</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { getFileSuffix, getFileUnitConversion, previewImages } from './evan-utils.js';
export default {
	name: 'evan-upload',
	props: {
		debug: {
			type: Boolean,
			default: false
		},
		// 主色调
		color: {
			type: String,
			default: '#ddb880'
		},
		radius: {
			type: Number,
			default: 6
		},
		cancelColor: {
			type: String,
			default: '#ddb880'
		},
		cancelText: {
			type: String,
			default: '取消上传'
		},
		selectImageText: {
			type: String,
			default: '选择图片'
		},
		selectVideoText: {
			type: String,
			default: '选择视频'
		},
		/**
		 * 是否自动切换数据配置，用于独立配置的情况
		 * 注意：如果独立使用组件，且单独配置上传地址的情况下，
		 * 	    如 v-if 显示图片选择 或者 视频选择的情况下 需要手动调用 fnChangeOptions()
		 * */
		autoChangeOptions: {
			type: Boolean,
			default: true
		},
		// 文件的扩展名字段，用于（ loadAllPreview）手动初始化默认的数据时候的判断
		fileSuffix: {
			type: String,
			default: 'fileType'
		},
		// 通用上传配置
		options: {
			type: Object,
			default: null
		},
		// 图片上传配置
		imageOptions: {
			type: Object,
			default: null
		},
		// 视频上传配置
		videoOptions: {
			type: Object,
			default: null
		},
		// 数据通用的格式化（默认是响应的格式）
		format: {
			type: Function,
			default: null
		},
		// 图片格式化(默认是响应的格式)
		imgFormat: {
			type: Function,
			default: null
		},
		// 视频格式化(默认是响应的格式)
		videoFormat: {
			type: Function,
			default: null
		},
		// 是否禁用上传
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否显示超出上传大小限制的图片
		showOverLimitTip: {
			type: Boolean,
			default: true
		},
		// 超出限制的使用是否启用弹窗效果
		useOverLimitTipModal: {
			type: Boolean,
			default: false
		},
		// 是否启用预览功能
		usePreview: {
			type: Boolean,
			default: true
		},
		// 是否使用图片上传
		useImage: {
			type: Boolean,
			default: true
		},
		// 是否使用视频上传
		useVideo: {
			type: Boolean,
			default: true
		},
		// 图片过滤
		imgExtension: {
			type: Array,
			default() {
				return ['jpg', 'jpeg', 'png'];
			}
		},
		// 图片的预览的键（默认 thumbnail）
		imgCoverKey: {
			type: String,
			default: 'thumbnail'
		},
		// 图片限制
		imgLimit: {
			type: Number,
			default: 9
		},
		// 图片单张大小限制（默认2048k = 2M）
		imgSizeLimit: {
			type: Number,
			default: 2048
		},
		// 图片压缩配置，默认原图和压缩
		imgSizeType: {
			type: Array,
			default() {
				return ['original', 'compressed'];
			}
		},
		// 图片来源，默认相册和相机
		imgSourceType: {
			type: Array,
			default() {
				return ['album', 'camera'];
			}
		},

		// 视频封面图的key （默认是 thumbnail ）
		videoCoverKey: {
			type: String,
			default: 'thumbnail'
		},
		// 视频限制
		videoLimit: {
			type: Number,
			default: 1
		},
		// 视频大小限制（默认102400kb = 100M）
		videoSizeLimit: {
			type: Number,
			default: 102400
		},
		// 是否启用视频压缩
		useVideoCompressed: {
			type: Boolean,
			default: true
		},
		// 视频来源，默认相册和相机
		videoSourceType: {
			type: Array,
			default() {
				return ['album', 'camera'];
			}
		},

		// 表单模块名称
		moduleName: {
			type: String,
			default: ''
		},
		// 默认预览的图片或者视频
		defaultImageOrVideoList: {
			type: Array,
			default() {
				return [];
			}
		},
		// 默认预览的图片
		defaultImageList: {
			type: Array,
			default() {
				return [];
			}
		},
		// 默认预览的视频
		defaultVideoList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			// 文件上传提示
			uploadFileTip: {
				task: null, // 文件上传Task
				show: false, // 是否显示
				totalBytesExpectedToSend: 0,
				totalBytesSent: 0, // 已经上传的数据长度，单位 Bytes
				progress: 0 // 上传进度百分比
			},
			uploadFileDeleteModal: {
				show: false,
				isImage: true,
				tip: ''
			},
			videoDefaultCover:'',
			Options: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
			ImageOptions: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
			VideoOptions: { url: '', name: 'file', moduleName: '', header: {}, formData: {} },
			isShowOverLimitModal: false,
			tempImgArr: [], // 用于展示的图片
			tempVideoArr: [], // 用于展示的视频
			imgArr: [], //图片数组
			videoArr: [], //视频数组
			overSizeImgArr: [], // 超出大小的图片
			overSizeVideoArr: [] // 超出大小的视频
		};
	},
	beforeUpdate() {
		if (this.autoChangeOptions) {
			if (this.useImage && this.useVideo) return;
			// 组件更新之前切换配置
			this.fnChangeOptions();
		}
	},
	mounted() {
		// 在小程序中存在数据无法回显的问题，改为手动触发
		// #ifndef MP-WEIXIN
		this.handleDefaultPrivew();
		// #endif
		// 初始化配置
		this.fnChangeOptions();
	},
	methods: {
		// 配置
		fnChangeOptions() {
			if (this.options) {
				this.ImageOptions = Object.assign({}, this.ImageOptions, this.options);
				this.VideoOptions = Object.assign({}, this.VideoOptions, this.options);
			}
			if (this.imageOptions) {
				this.ImageOptions = Object.assign({}, this.ImageOptions, this.imageOptions);
			}
			if (this.videoOptions) {
				this.VideoOptions = Object.assign({}, this.VideoOptions, this.videoOptions);
			}
		},
		loadAllPreview(list) {
			this.clear();
			if (!list) return;
			list.forEach((item, index) => {
				this.handlePreviewData(item, item[this.fileSuffix] !== 'mp4', true);
			});
		},
		loadImagePreview(list) {
			this.clear();
			if (!list) return;
			list.forEach((item, index) => {
				this.handlePreviewData(item, true);
			});
		},
		loadVideoPreview(list) {
			this.clear();
			if (!list) return;
			list.forEach((item, index) => {
				this.handlePreviewData(item, false);
			});
		},
		chooseImage() {
			if (this.disabled) return;
			if (!this.ImageOptions.url) {
				return uni.showToast({
					icon: 'none',
					title: '未配置上传地址'
				});
			}
			const _this = this;
			this.overSizeImgArr = [];
			uni.chooseImage({
				count: this.imgLimit,
				extension: this.imgExtension,
				crop: this.crop,
				sourceType: this.imgSourceType,
				sizeType: this.imgSizeType, //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					uni.showLoading({
						title: '上传中...',
						mask: true
					});
					_this.$emit('on-loading', true);
					for (var i = 0; i < res.tempFilePaths.length; i++) {
						if (_this.fileUnitConversion(res.tempFiles[i].size, 'B', 'KB') > _this.imgSizeLimit) {
							_this.overSizeImgArr.push({
								url: res.tempFilePaths[i],
								fileName: res.tempFiles[i].name,
								size: _this.fileUnitConversion(res.tempFiles[i].size) + 'M'
							});
						} else {
							uni.uploadFile({
								url: _this.ImageOptions.url,
								filePath: res.tempFilePaths[i],
								name: _this.ImageOptions.name,
								header: _this.ImageOptions.header,
								formData: {
									..._this.ImageOptions.formData,
									moduleName: _this.moduleName
								},
								success: uploadFileRes => {
									if (uploadFileRes.statusCode != 200) {
										uni.showToast({
											icon: 'none',
											title: '上传失败，服务器异常！'
										});
										_this.$emit('on-error', uploadFileRes);
									} else {
										_this.handleUploadRes(uploadFileRes, true);
									}
								},
								fail(err) {
									uni.showToast({
										icon: 'none',
										title: '上传出错了'
									});
									_this.debug && console.error(err);
									// uni.hideLoading();
									_this.$emit('on-error', err);
								}
							});
						}
						// 执行回调显示超出限制的图片
						if (i + 1 == res.tempFilePaths.length) {
							if (_this.overSizeImgArr.length == res.tempFilePaths.length) {
								uni.hideLoading();
							}
							_this.fnEmitOverSize();
							_this.$emit('on-success', true);
						}
					}
				}
			});
		},
		chooseVideo() {
			if (this.disabled) return;
			if (!this.VideoOptions.url) {
				return uni.showToast({
					icon: 'none',
					title: '未配置上传地址'
				});
			}
			const _this = this;
			uni.chooseVideo({
				sourceType: this.videoSourceType,
				compressed: this.useVideoCompressed,
				success: function(res) {
					_this.uploadFileTip.show = true;
					// 上传视频
					_this.uploadFileTip.task = uni.uploadFile({
						url: _this.VideoOptions.url,
						filePath: res.tempFilePath,
						name: _this.VideoOptions.name,
						header: _this.VideoOptions.header,
						formData: {
							..._this.VideoOptions.formData,
							moduleName: _this.moduleName
						},
						success: uploadFileRes => {
							if (uploadFileRes.statusCode != 200) {
								uni.showToast({
									icon: 'none',
									title: '上传失败，服务器异常！'
								});
								_this.$emit('on-error', uploadFileRes);
							} else {
								_this.handleUploadRes(uploadFileRes, false);
							}
						},
						fail(err) {
							uni.showToast({
								icon: 'none',
								title: '上传出错了'
							});
							_this.debug && console.error(err);
							_this.uploadFileTipDestroy();
							_this.$emit('on-error', err);
						}
					});
					_this.uploadFileTask();
				}
			});
		},
		// 处理回调的数据
		handleUploadRes(res, isImage = true) {
			uni.hideLoading();
			const _this = this;
			if (res.statusCode != 200) {
				_this.$emit('on-error', res);
				_this.$u.toast(res.msg || '上传失败，请重试！');
				_this.uploadFileTipDestroy();
				return;
			}
			// 后台返回数组的形式
			if (res['code'] != undefined && res.code === 200) {
				if (Object.prototype.toString.call(res.data) === '[object Array]') {
					res.data.forEach(item => {
						_this.handlePreviewData(item, isImage);
					});
					// 后台返回对象形式
				} else if (Object.prototype.toString.call(res.data) === '[object Object]') {
					// 返回对象的形式
					_this.handlePreviewData(res.data, isImage);
				} else {
					// 后台返回直接返回图片
					_this.handleRes(res.data, isImage);
				}
				_this.handleCallback(res);
				// 校验是否有状态码的情况(直接返回图片地址)
			} else if (Object.prototype.toString.call(res.data) == '[object String]') {
				_this.handleRes(res.data, isImage, true);
				_this.handleCallback(res);
			} else {
				_this.$emit('on-error', res);
				_this.$u.toast(res.msg || '上传失败，请重试！');
				_this.uploadFileTipDestroy();
			}
		},
		handleRes(res, isImage, isString = false) {
			const _this = this;
			let _fileNameOrUrl = isString ? res : res.data;
			let _fileSuffix = getFileSuffix(_fileNameOrUrl);
			if (isImage) {
				if (this.imgCoverKey == 'url') {
					_this.handlePreviewData(
						{
							url: _fileNameOrUrl,
							[this.fileSuffix]: _fileSuffix
						},
						true
					);
				} else {
					_this.handlePreviewData(
						{
							[this.imgCoverKey]: _fileNameOrUrl,
							url: _fileNameOrUrl,
							[this.fileSuffix]: _fileSuffix
						},
						true
					);
				}
			} else {
				_this.handlePreviewData(
					{
						url: _fileNameOrUrl,
						[this.fileSuffix]: _fileSuffix
					},
					false
				);
			}
		},
		handleCallback(res) {
			this.sendData();
			this.uploadFileTipDestroy();
			this.$emit('on-success', res);
		},
		uploadFileTask() {
			this.uploadFileTip.task.onProgressUpdate(res => {
				this.uploadFileTip.progress = res.progress;
				this.uploadFileTip.totalBytesSent = this.fileUnitConversion(res.totalBytesSent);
				this.uploadFileTip.totalBytesExpectedToSend = this.fileUnitConversion(res.totalBytesExpectedToSend);
			});
		},
		// 销毁上传任务
		uploadFileTipDestroy() {
			this.uploadFileTip.show = false;
			if (this.uploadFileTip.task) {
				this.uploadFileTip.task.abort(); // 终止上传
			}
			const _setTimeout = setTimeout(() => {
				this.uploadFileTip.task = null;
				this.uploadFileTip.progress = 0;
				this.uploadFileTip.totalBytesSent = 0;
				this.uploadFileTip.totalBytesExpectedToSend = 0;
				clearTimeout(_setTimeout);
			}, 200);
		},
		fileUnitConversion(byte, from = 'B', to = 'M') {
			return getFileUnitConversion(byte, from, to);
		},
		/**
		 * 超出大小限制的图片或者视频
		 * */
		fnEmitOverSize() {
			if (this.showOverLimitTip && this.useOverLimitTipModal && this.overSizeImgArr.length != 0) {
				this.isShowOverLimitModal = true;
			}
			this.$emit('on-over-list', {
				images: this.overSizeImgArr,
				videos: this.overSizeVideoArr
			});
		},
		fnClearOverSizeArr(type) {
			this.isShowOverLimitModal = false;
			if (type == 'image') {
				this.overSizeImgArr = [];
			} else {
				this.overSizeVideoArr = [];
			}
		},
		// 更新文件上传对象字段
		updateFileDataObject(key, val) {
			this.$set(this.uploadFileTip, key, val);
		},
		// 回调发送数据
		sendData() {
			let _data = [],
				_type = 'all';
			if (this.useImage && this.useVideo) {
				// 都使用
				if (this.imgArr.length !== 0) {
					_data.push(...this.imgArr);
				}
				if (this.videoArr.length !== 0) {
					_data.push(...this.videoArr);
				}
				_type = 'all';
			} else if (this.useImage) {
				// 使用图片
				if (this.imgArr.length !== 0) {
					_data.push(...this.imgArr);
				}
				_type = 'image';
			} else if (this.useVideo) {
				if (this.videoArr.length !== 0) {
					_data.push(...this.videoArr);
				}
				_type = 'video';
			}
			this.$emit('on-upload', {
				type: _type,
				data: _data
			});
		},
		// 图片预览
		fnPreviewImage(current, images) {
			previewImages(current, images);
		},
		// 删除图片或视频
		deleteImageOrVideo(index, isImage = true) {
			this.uploadFileDeleteModal.tip = `您确定要删除该${isImage ? '图片' : '视频'}吗？`;
			this.uploadFileDeleteModal.show = true;
			this.uploadFileDeleteModal.isImage = isImage;
			this.uploadFileDeleteModal.index = index;
		},
		// 确认删除
		uploadFileDeleteConfirm() {
			let index = this.uploadFileDeleteModal.index;
			if (this.uploadFileDeleteModal.isImage) {
				this.tempImgArr.splice(index, 1);
				this.imgArr.splice(index, 1);
			} else {
				this.tempVideoArr.splice(index, 1);
				this.videoArr.splice(index, 1);
			}
			this.sendData();
		},
		// 处理图片数据
		handlePushImage(dataItem) {
			// 支持自定义格式化
			if (this.imgFormat && typeof this.imgFormat === 'function') {
				this.imgArr.push(this.imgFormat(dataItem));
				this.tempImgArr.push(this.imgFormat(dataItem));
			} else if (this.format && typeof this.format === 'function') {
				this.imgArr.push(this.format(dataItem));
				this.tempImgArr.push(this.format(dataItem));
			} else {
				this.imgArr.push(dataItem);
				this.tempImgArr.push(dataItem);
			}
		},
		// 处理视频数据
		handlePushVideo(dataItem) {
			if (this.videoFormat && typeof this.videoFormat === 'function') {
				this.videoArr.push(this.videoFormat(dataItem));
				this.tempVideoArr.push(this.videoFormat(dataItem));
			} else if (this.format && typeof this.format === 'function') {
				this.videoArr.push(this.format(dataItem));
				this.tempVideoArr.push(this.format(dataItem));
			} else {
				this.videoArr.push(dataItem);
				this.tempVideoArr.push(dataItem);
			}
		},
		handlePreviewData(dataItem, isImage = true, isAll = false) {
			if (isAll) {
				if (isImage) {
					this.handlePushImage(dataItem);
				} else {
					this.handlePushVideo(dataItem);
				}
				return;
			}
			if (isImage) {
				this.handlePushImage(dataItem);
			} else {
				this.handlePushVideo(dataItem);
			}
		},
		/**
		 * 	处理传入的文件
		 * 注意：传入的文件名称 的key是 name 而不是fileName
		 * */
		handleDefaultPrivew() {
			this.clear();
			if (this.useImage && this.useVideo) {
				// 都使用
				this.defaultImageOrVideoList.forEach((item, index) => {
					this.handlePreviewData(item, item[this.fileSuffix] !== 'mp4', true);
				});
			} else if (this.useImage) {
				this.defaultImageList.forEach((item, index) => {
					this.handlePreviewData(item, true);
				});
			} else {
				this.defaultVideoList.forEach((item, index) => {
					this.handlePreviewData(item, false);
				});
			}
			// #ifndef MP-WEIXIN
			this.$forceUpdate();
			// #endif
		},
		// 预览视频
		fnPreviewVideo(video) {
			this.$emit('on-pre-video', video);
		},
		// 重置相关变量
		clear() {
			this.tempImgArr = [];
			this.tempVideoArr = [];
			this.imgArr = [];
			this.videoArr = [];
			this.overSizeImgArr = [];
			this.overSizeVideoArr = [];
		}
	}
};
</script>

<style lang="scss" scoped>
@import './evan-iconfont.css';
.upload-wrap {
	display: flex;
	flex-wrap: wrap;
}
.progress-wrapper {
	padding: 30rpx;
	padding-bottom: 16rpx;
}
.progress-tip {
	font-size: 28rpx;
	text-align: center;
}
.preview-wrap {
	display: inline-flex;
	flex-wrap: wrap;
	.image,
	.video {
		position: relative;
		margin: 8rpx;
		box-sizing: border-box;
		width: 156rpx;
		height: 152rpx;
		video {
			width: 100%;
			height: 100%;
		}

		.cover {
			position: relative;
			width: 100%;
			height: 100%;
			// background-color: #000000;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 6rpx;
			.icon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 10;
				box-sizing: border-box;
				background-color: #fa3534;
				border-radius: 100%;
				width: 36rpx;
				height: 36rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}

			.play-icon {
				box-sizing: border-box;
				color: #ffffff;
				font-size: 60rpx;
				padding-top: 20rpx;
			}
			.play-text {
				margin-top: -20rpx;
				color: #ffffff;
				font-size: 24rpx;
			}
		}
	}
	.image {
		width: 156rpx;
	}
	.video {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&.no-mask {
			&::after {
				display: none;
			}
		}
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			border-radius: var(--radius);
			background-color: rgba(0, 0, 0, 0.3);
		}
		.video-play {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
			&-icon {
			}
		}
		.video-play-cover {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 12rpx 0;
			border: 2rpx solid #eee;
			background-color: #f2f2f2;
			&-image {
				width: 100%;
				height: 100%;
				z-index: 2;
			}
		}
		.video-play-cover-icon {
			display: inline-block;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 120rpx;
			font-size: 110rpx;
			border: 2rpx solid #eee;
			background-color: #f2f2f2;
		}
		.video-play-name {
			width: 150rpx;
			position: absolute;
			bottom: 10rpx;
			font-size: 24rpx;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		box-sizing: border-box;
		background-color: #fa3534;
		border-radius: 100%;
		width: 36rpx;
		height: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.delete-cover {
		width: 160rpx;
		height: 152rpx;
		position: relative;
		background-color: transparent;
		z-index: 2;
		.icon {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 10;
			box-sizing: border-box;
			background-color: #fa3534;
			border-radius: 100%;
			width: 44rpx;
			height: 44rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
}
.select-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	justify-items: center;
	box-sizing: border-box;
	border: 2rpx dashed #dadada;
	margin: 8rpx;
	width: 156rpx;
	height: 152rpx;
	border-radius: 6rpx;
	.icon {
		margin-top: 16rpx;
		z-index: 3;
	}
	.e-icon-video {
		color: #999 !important;
		font-size: 40rpx;
		margin-top: 14rpx;
	}
	.text {
		color: #999;
		font-size: 24rpx;
	}
}
.over-size-wrapper {
	box-sizing: border-box;
	margin: 8rpx;
	padding: 10rpx;
	width: 100%;
	border-radius: 6rpx;
	border: 2rpx dashed #ddb880;
	&.in-modal {
		margin: 0;
	}
	&-title {
		display: flex;
		margin-bottom: 10rpx;
		color: red;
		font-size: 24rpx;
		&-tip {
			flex-grow: 1;
		}
		&-clear {
			width: 150rpx;
			text-align: right;
			font-size: 24rpx;
			color: #ddb880;
			&-icon {
			}
		}
	}
	&-list {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		&-item {
			position: relative;
			width: 25%;
			padding: 6rpx;
			&-image {
				width: 100%;
				height: 130rpx;
			}
			&-name {
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 24rpx;
			}
			&-size {
				position: absolute;
				top: 105rpx;
				right: 6rpx;
				left: 6rpx;
				text-align: center;
				padding-right: 10rpx;
				font-size: 24rpx;
				background: #d6c09fa8;
				color: #fff;
			}
		}
	}
}
</style>
